<template>
<wd-overlay :show="show" @click="cancel">
  <div class="wrapper">
    <div
    class="block"
    :style="{height}"
    @click.stop="">
      <slot></slot>
      <div
      class="overlay-footer"
      :style="{marginTop: footerTop}"
      >
        <div class="button" :class="buttonSize === 'small' ? 'small-button' : '' " @click="onOk">
          <div>{{ okText }}</div>
        </div>
        <div v-if="showCancel" class="mt-2 text-[#ccc]" @click="cancel">{{ cancelText }}</div>
      </div>
    </div>
  </div>
</wd-overlay>
</template>

<script setup lang="ts">

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 内容高度
  height: {
    type: String,
    default: '618rpx'
  },
  // 底部按钮区域距离内容高度
  footerTop: {
    type: String,
    default: '106rpx'
  },
  // 确认按钮文字
  okText: {
    type: String,
    default: '我已知晓'
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: '取消'
  },
  // 是否展示取消按钮
  showCancel: {
    type: Boolean,
    default: true
  },
  // 按钮尺寸
  buttonSize: {
    type: String,
    default: 'large'
  },
})

const emit = defineEmits(['update:visible', 'ok']);
const show = computed({
  set: (val) =>{
    emit('update:visible', val)
  },
  get: () => props.visible
});

// 取消回调
const cancel = () => {
  emit('update:visible', false)
};

// 确认回调
const onOk = () => {
  emit('ok')
  cancel();
};
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 630rpx;
  background-color: #fff;
  border-radius: 40rpx;
}

:deep(.tip-text){
  line-height: 48rpx;
}

.button{
  padding: 10px 24px;
  border-radius: 4px;
  opacity: 1;
  background: #56B756;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-sizing: box-border;
}

.small-button{
  margin: auto;
  width: 256rpx;
  box-sizing: border-box;
}

.overlay-footer{
  text-align: center;
  padding: 0 116rpx;
}
</style>
